<template>
  <div class="filter-menu">
    <template>
      排序依据：
      <a-dropdown>
        <a class="ant-dropdown-link"
           @click="e => e.preventDefault()">
          {{orderBy}}
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a @click="orderByCorr">最多点赞</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="orderByDate">最新发布</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="orderByView">最多学习</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </template>

  </div>

</template>

<script>
export default {
  data() {
    return {
      order: 1,
      orderBy: '最多点赞',
    }
  },
  methods: {
    preventDefault() {},
    orderByCorr() {
      this.order = 1
      this.orderBy = '最多点赞';
      this.$bus.$emit('orderBy', this.order)
    },
    orderByDate() {
      this.order = 2
      this.orderBy = '最新发布';
      this.$bus.$emit('orderBy', this.order)
    },
    orderByView() {
      this.order = 3
      this.orderBy = '最多学习';
      this.$bus.$emit('orderBy', this.order)
    },
  },
}
</script>

<style>
.filter-menu {
  padding-top: 16px;
  height: 40px;
  line-height: 40px;
  vertical-align: bottom;
}
</style>